<template>
  <view class="content" v-if="isShow">
    <new-year-task-pop ref="newYearTask"></new-year-task-pop>
    <view class="text-box">
      <view class="box">
        <!--        输入框-->
        <view class="textarea-box" v-if="textList.length===0">
          <view class="bj-text" v-if="!text">
            <image :src="image_host+'icon_penlic@2x.png'"></image>
            展开说说你的想法吧…
          </view>
          <view class="textarea">
            <textarea v-model="text"></textarea>
          </view>
        </view>
      </view>
      <view class="message-prompt">发表
        <text>10</text>
        字以上可以获得
        <text>5积分</text>
        ，发表10字以上+2图片可获得
        <text>10积分</text>
        ，发表
        <text>10</text>
        字
        <text>+1</text>
        视频可获得
        <text>20积分</text>
        呦
      </view>
      <view class="upload-box">
        <view class="upload-item" v-for="(item,imageIndex) in uploadList">
          <image mode="aspectFit" v-if="item.fileType==='video'" :src="item.thumbTempFilePath"></image>
          <image mode="aspectFit" v-if="item.fileType==='image'" :src="item.tempFilePath"></image>
          <view class="schedule" v-if="[0,1].includes(item.type)">{{ item.progress }}%</view>
          <view class="video-play" v-if="item.fileType==='video' && item.type===2">
            <image :src="image_host+'icon_play.png'"></image>
          </view>
          <view class="image-template" v-if="item.templateId>0">
            <image :src="image_host_template+'t'+item.templateId+'.png'"></image>
          </view>
          <view class="del" @click="delImg(item,imageIndex)">
            <uni-icons type="closeempty" color="#fff"></uni-icons>
          </view>
        </view>
        <view class="upload-button" :class="uploadList.length===0?'upload-button-da':''" @click="uploadFile">
          <image mode="aspectFit" :src="image_host+'icon_intozhaopian@2x.png'"></image>
          <view>添加照片/视频</view>
        </view>
      </view>
      <!--      选择模版-->
      <view class="setTemplate" v-if="isTemplateList">
        <view class="setTemplate-title">拍摄特效</view>
        <view class="setTemplate-value">
          <view class="setTemplate-value-item" v-for="item in templateList" @click="toTemplate(item)">
            <view class="setTemplate-value-image">
              <image :src="item.thumbImg"></image>
              <view class="setTemplate-value-image-count">{{ item.num }}人使用</view>
            </view>
            <view class="setTemplate-value-title">{{ item.title }}</view>
          </view>
        </view>
      </view>
      <!--      选择圈子-->
      <view class="setCircle" @click="toCircleClass">
        <view class="setCircle-title">参与话题</view>
        <view class="setCircle-value">
          <view class="Circle-title" v-if="!topicInfo.id">#请选择话题</view>
          <view class="Circle-title Circle-title-value" v-if="topicInfo.id">#{{ topicInfo.title }}</view>
          <view class="Circle-icon">
            <uni-icons size="25" color="#666666" type="forward"></uni-icons>
          </view>
        </view>
      </view>
      <!--      推荐圈子选择-->
      <view class="rec_suggestion" v-if="recommentSayCircelList.length!==0">
        <view class="rec_suggestion-message">
          推荐话题
          <view class="triangle-down"></view>
        </view>
        <view class="circle-list">
          <view :class="topicInfo.id===i.id?'circle-item-active':''" class="circle-item"
                v-for="i in recommentSayCircelList" @click="setTopic(i)">
            #{{ i.title }}
            <uni-icons v-if="topicInfo.id===i.id" type="closeempty" color="#F33F02"></uni-icons>
            <view class="circle-item-icon" v-if="i.sayRate>1">
              <text>{{ i.sayRate }}倍奖励</text>
              <!--              <image :src="image_host+'icon_tui.png'"></image>-->
            </view>
          </view>
        </view>
      </view>
      <view class="address" v-if="city">
        <view class="icon">
          <image :src="image_host+'icon_adress@2x.png'"></image>
        </view>
        <text>{{ city }}</text>
      </view>
    </view>
    <view class="bottom">
      <view class="message">
        <view class="message-icon">
          <image mode="aspectFit" :src="image_host+'q_icon_jifen@2x.png'"></image>
        </view>
        <view class="message-box">
          <view class="message-text-1">发布可领取积分呦</view>
          <!--          <view class="message-text-2">成功获取0积分</view>-->
        </view>
      </view>
      <view class="button" :class="(text.length-textListCount)>=10 && isSubmit?'button-hover':''">
        <view class="button-icon">
          <image mode="aspectFit" :src="image_host+'icon_fabu@2x.png'"></image>
        </view>
        <view class="button-text" @click="Submit">发布</view>
      </view>
    </view>
  </view>
</template>

<script>
import Daren from "@/pages/circle/components/daren.vue";
import popMessage from "@/pages/circle/components/popMessage.vue";
import {uploadFile2} from "@/common/uploadCOS"
import NewYearTaskPop from "@/components/new-year-task-pop/new-year-task-pop.vue";

export default {
  components: {NewYearTaskPop, Daren, popMessage},
  data() {
    return {
      image_host: this.image_host + 'quanzi/',
      image_host_template: this.image_host + 'template/',
      text: "",
      uploadList: [],
      imageCount: 0,
      videoCount: 0,
      textList: [],
      topicId: 0,
      config: {},
      titleList: [],
      textHover: [],
      messagePrompt: '',
      textListCount: 0,
      messageNum: "",
      info: "",
      scrollTopComment: 0,
      dayLimit: false,
      returnData: {},
      isSubmit: true,
      recommentSayCircelList: [],
      topicInfo: {id: '', title: ""},
      city: "",
      templateList: [],
      isTemplateList: true,
      isShow: false
    };
  },
  onLoad(e) {
    this.topicId = e.id
    if (e.info) {
      this.info = JSON.parse(e.info)
      this.scrollTopComment = e.scrollTopComment
      uni.setNavigationBarTitle({title: '修改评论'})
    }
    this.init()
  },
  onShow() {
    let _this = this
    this.getIsShow()
    uni.$on("setCircle", function (item) {
      _this.setTopic(item)
      uni.$off('setCircle')
    })
    uni.$off('uploadFile')
    uni.$on("uploadFile", (data) => {
      this.isTemplateList = false
      this.uploadList.push({
        tempFilePath: data.file.url,
        thumbTempFilePath: data.file.thumbUrl,
        size: 0,
        fileType: data.file.type,
        type: 0,//0 未上传，1上传中，2上传成功，3上传失败
        url: "",
        thumbUrl: "",
        progress: 0,
        templateId: data.templateId
      })
      this.uploadListOnChange(this.uploadList)
      uni.$off('uploadFile')
    })
  },
  watch: {
    textList: {
      handler(newArray, oblArray) {
        this.text = ''
        this.textListCount = 0
        this.textHover = newArray.map((item, index) => {
          this.textListCount += item.title.length
          this.text += item.text
          if (item.text.length < item.title.length) {
            this.textList.splice(index, 1)
          } else {
            return item.text1
          }
        })
      },
      deep: true
    },
    text: {
      handler(text) {
        if ((text.length - this.textListCount) < this.config.publish_comment_word.conditions) {
          let integral = this.config.publish_comment_word.integral
          let conditions = (this.config.publish_comment_word.conditions + this.textListCount) - text.length
          this.messagePrompt = `在写<span style="color: #C9623C">${conditions}</span>个字就可以获<span style="color: #C9623C">${integral}</span>积分`
        } else {
          if (this.videoCount === 0) {
            this.messagePrompt = `再上传<span style="color: #C9623C">${this.config.publish_comment_picture.conditions}</span>张图就可以获<span style="color: #C9623C">${this.config.publish_comment_picture.integral}</span>积分`
          } else {
            this.messagePrompt = ``
          }
        }
      },
      deep: true
    },
    uploadList: {
      handler(newArray, olbArray) {
        let imageCount = 0
        let videoCount = 0
        newArray.forEach(item => {
          if (item.fileType === 'image') {
            imageCount++
          } else if (item.fileType === 'video') {
            videoCount++
          }
        })
        this.imageCount = imageCount
        this.videoCount = videoCount
        if (videoCount > 0) {
          this.messagePrompt = ``
        }
        if (imageCount < this.config.publish_comment_picture.conditions && (this.text.length - this.textListCount) >= 10 && videoCount === 0) {
          let integral = this.config.publish_comment_picture.integral
          let conditions = this.config.publish_comment_picture.conditions - imageCount
          this.messagePrompt = `在上传<span style="color: #C9623C">${conditions}</span>张图就可以获<span style="color: #C9623C">${integral}</span>积分`
        } else {
          this.messagePrompt = ``
        }
      },
      deep: true
    }
  },
  methods: {
    // 是否显示发布话题
    async getIsShow() {
      let res = await this.$javaCircle.doRequest("post", "userservice/checkLine", '', '')
      this.isShow = !(res.data.data === null ? true : res.data.data);
    },
    async init() {
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/say/getRecommentSayCircelList', {
        page: 1,
        pageSize: 3
      }, 'json', false)
      if (data.code === 0) {
        this.recommentSayCircelList = data.data.list
        this.city = data.data.city
        this.templateList = data.data.templateList
      }
    },
    // 选择模版
    toTemplate(item) {
      uni.navigateTo({
        url: "/mediaContainer/index/index?templateId=" + item.id + '&title=' + item.title
      })
    },
    // 设置圈子
    setTopic(item) {
      if (item.id === this.topicInfo.id) {
        this.topicInfo = {id: '', title: ""}
      } else {
        this.topicInfo = {
          id: item.id,
          title: item.title
        }
      }
    },
    delImg(item, imageIndex) {
      console.log(item, imageIndex)
      if (item.templateId > 0) {
        this.isTemplateList = true
      }
      this.uploadList.splice(imageIndex, 1)
    },
    // 选择圈子
    toCircleClass() {
      uni.navigateTo({url: '/pages/circle/circleOfFriends/sendFriends/circleClass/circleClass'})
    },
    addText(text) {
      if (this.textHover.includes(text)) {
        uni.showToast({title: '已存在', icon: "error"})
        return
      }
      let texts = text + ':'
      this.textList.push({title: texts, text: texts + '', text1: text})
    },
    uploadFile() {
      uni.chooseMedia({
        count: 9, // 最多选择的文件数量
        mediaType: ['image', 'video'], // 文件选择的类型，可以是图片、视频
        sourceType: ['album', 'camera'], // 文件选择的来源，可以是相册、相机
        success: (res) => {
          let list = res.tempFiles.map(item => {
            return {
              tempFilePath: item.tempFilePath,
              thumbTempFilePath: item.thumbTempFilePath,
              size: item.size,
              fileType: item.fileType,
              type: 0,//0 未上传，1上传中，2上传成功，3上传失败
              url: "",
              thumbUrl: "",
              progress: 0
            }
          })
          this.uploadList = this.uploadList.concat(list)
          this.uploadListOnChange(this.uploadList)
        }
      })
    },
    // 上传附件
    uploadListOnChange(list) {

      list.forEach((item, index) => {
        if (item.type === 0) {
          // 上传附件
          this.uploadList[index].type = 1
          let filename = item.tempFilePath.substr(item.tempFilePath.lastIndexOf('/') + 1);
          uploadFile2(item.tempFilePath, filename, item.size, progress => {
            this.uploadList[index].progress = parseInt(progress.percent * 100)
          }, false).then(res => {
            this.uploadList[index].type = 2
            this.uploadList[index].url = 'https://' + res.Location.replace("cos.ap-nanjing", "file");
          })
          if (!item.thumbTempFilePath) {
            return
          }
          // 上传视频第一针
          let filename1 = item.thumbTempFilePath.substr(item.thumbTempFilePath.lastIndexOf('/') + 1);
          uploadFile2(item.thumbTempFilePath, filename1, item.size, progress => {

          }, false).then(res => {
            this.uploadList[index].thumbUrl = 'https://' + res.Location.replace("cos.ap-nanjing", "file");
          })
        }
      })
    },
    // 发布评论
    async Submit() {
      if ((this.text.length - this.textListCount) < 10) {
        uni.showToast({title: '最少需要10个文字', icon: 'none'})
        return
      }
      if (!this.isSubmit) {
        console.log('重复点击')
        return
      }
      this.isSubmit = false
      let isFile = true;
      let postData = {
        topicId: this.topicInfo.id,
        content: this.text,
        picUrl: JSON.stringify(this.uploadList.map(item => {
          if (item.type !== 2) {
            isFile = false
          }
          return {fileType: item.fileType, url: item.url, thumbUrl: item.thumbUrl, templateId: item.templateId}
        })),
        from: uni.getStorageSync('taskId') === 1 ? 'task' : ''
      }
      if (!isFile) {
        this.isSubmit = true
        uni.showToast({title: '附件上传中...', icon: 'none'})
        return
      }
      if (this.info) {
        postData.commentId = this.info.id
      }
      let data = await this.$javaCircle.doRequest("post", 'circle/customer/say/sendSay', postData, 'json', true)
      setTimeout(() => {
        this.isSubmit = true
      }, 2000)
      if (data.data.code !== 0) {
        uni.showToast({title: data.data.message, icon: 'none'})
        return
      }
      uni.setStorageSync("taskId", false)
      if (postData.from === 'task') {
        await this.$refs.newYearTask.show()
      }
      this.showMessage(data.data.data)
    },
    showMessage(info) {
      uni.showToast({title: "发布成功", icon: "none"})
      setTimeout(() => {
        uni.setStorageSync("isSendFriends", info)
        uni.switchTab({
          url: "/pages/circle/index"
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 20upx;
}

.top-message {
  width: 100%;
  height: 68upx;
  background: linear-gradient(90deg, #FFF9F1 0%, #FAE9CD 100%);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20upx;
  font-size: 29upx;
  color: #241B0F;
  justify-content: space-between;

  text {
    color: #C9623C;
  }
}

.text-box {
  width: 100%;
  box-sizing: border-box;
  padding: 26upx 20upx;
  flex: 1;
  overflow: auto;
}

.tap {
  display: flex;
  flex-wrap: wrap;
  column-count: 3;
  column-gap: 24upx;
}

.tap-item {
  box-sizing: border-box;
  padding: 6upx 22upx;
  color: #666666;
  border: 1upx solid #979797;
  margin-bottom: 24upx;
  border-radius: 31upx;
}

.textarea-box {
  position: relative;
  width: 100%;
}

.bj-text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 42upx;
  color: #999999;
  display: flex;
  align-items: center;
  z-index: 1;

  image {
    width: 37upx;
    height: 37upx;
    margin-right: 8upx;
  }
}

.textarea {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  font-size: 40upx;
  z-index: 2;
  min-height: 200upx;

  textarea {
    width: 100%;
    min-height: 200upx;
  }
}

.upload-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-count: 3;
  column-gap: 12upx;
  margin-top: 20upx;
}

.upload-item {
  width: 222upx;
  height: 222upx;
  background-color: #F4F4F4;
  border-radius: 8upx;
  position: relative;
  margin-bottom: 12upx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 8upx;
  }

  .schedule {
    position: absolute;
    top: 0;
    right: 0;
    width: 222upx;
    height: 222upx;
    background-color: rgba(0, 0, 0, .6);
    color: #00aaff;
    text-align: center;
    line-height: 222upx;
  }

  .video-play {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;

    image {
      width: 62upx;
      height: 62upx;
    }
  }

  .del {
    position: absolute;
    width: 42upx;
    height: 42upx;
    background-color: red;
    top: -20upx;
    right: -20upx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
}

.upload-button {
  width: 222upx;
  height: 222upx;
  background-color: #F4F4F4;
  border-radius: 8upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30upx;
  color: #999999;

  image {
    width: 70upx;
    height: 65upx;
    margin-bottom: 27upx;
  }
}

.upload-button-da {
  width: 100%;
}

.bottom {
  width: 100%;
  height: 130upx;
  box-sizing: border-box;
  padding: 0 30upx;
  display: flex;
  justify-content: space-between;
  margin-bottom: env(safe-area-inset-bottom);
}

.message {
  flex: 1;
  display: flex;
  align-items: center;
}

.message-icon {
  width: 42upx;
  height: 43upx;
  margin-right: 5upx;

  image {
    width: 100%;
    height: 100%;
  }
}

.message-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 8upx;
}

.message-text-1 {
  font-size: 34upx;
  color: #333;
  font-weight: 500;
}

.message-text-2 {
  font-size: 30upx;
  color: #666666;
}

.button {
  width: 300upx;
  height: 130upx;
  border-radius: 80upx;
  background: linear-gradient(130deg, #C2E1CC 0%, #78C091 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50upx;
  color: #fff;
  font-weight: 600;

  image {
    width: 42upx;
    height: 43upx;
    margin-right: 14upx;
  }
}

.textarea-item {
  width: 100%;
  position: relative;
  margin-bottom: 30upx;
}

.bj-text2 {
  font-size: 40upx;
  color: #999999;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: fit-content;
  background-color: #fff;
}

.textarea2 {
  width: 100%;
  position: relative;
  z-index: 1;

  textarea {
    width: 100%;
    font-size: 40upx;
    line-height: 50upx;
  }
}

.tap-item-hover {
  background-color: rgba(220, 255, 232, 1) !important;
  color: rgba(74, 177, 110, 1) !important;
  border: none;
}

.button-hover {

  background: linear-gradient(130deg, #4CB06A 0%, #4AB16E 100%) !important;
}

.message-prompt {
  width: 100%;
  box-sizing: border-box;
  padding: 13upx 24upx;
  font-size: 30upx;
  color: #241B0F;
  background: linear-gradient(90deg, #FFF9F1 0%, #FAE9CD 100%);;
}

.message-prompt text {
  color: #C9623C;
}

.setCircle {
  width: 100%;
  height: 120upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .setCircle-title {
    font-size: 40upx;
    color: #333333;
  }

  .setCircle-value {
    display: flex;
    align-items: center;
    font-size: 36upx;
    color: #666666;

    .Circle-title {
      width: fit-content;
      box-sizing: border-box;
      padding: 8upx 20upx;
      background-color: #EBEBEC;
      border-radius: 25upx;
      max-width: 300upx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 34upx;
    }
  }
}

.setTemplate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 20upx;
  margin-bottom: 10upx;

  .setTemplate-title {
    font-size: 40upx;
    color: #333333;
  }

  .setTemplate-value {
    width: 100%;
    display: flex;
    //flex-wrap: wrap;
    font-size: 36upx;
    color: #666666;
    overflow: auto;

    .setTemplate-value-item {
      margin-right: 30upx;
      margin-top: 20upx;
      width: 240upx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .setTemplate-value-image {
        width: 240upx;
        height: 240upx;
        background-color: #D8D8D8;
        border-radius: 10upx;
        position: relative;

        image {
          width: 100%;
          height: 100%;
        }

        .setTemplate-value-image-count {
          height: 50upx;
          line-height: 50upx;
          padding: 0 12upx;
          border-radius: 0 10upx 0 33upx;
          color: #fff;
          font-size: 30upx;
          background-color: rgba(243, 63, 2, .8);
          position: absolute;
          top: 0;
          right: 0;
        }

      }

      .setTemplate-value-title {
        font-size: 34upx;
        color: #666;
        margin-top: 10upx;
        width: 100%;
        text-align: center;
        font-weight: 700;
      }
    }
  }
}

.rec_suggestion {
  width: 100%;

  .rec_suggestion-message {
    width: fit-content;
    box-sizing: border-box;
    padding: 7upx 12upx;
    background-color: #F33F02;
    border-radius: 8upx;
    font-size: 34upx;
    color: #FFFFFF;
    position: relative;

    .triangle-down {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10upx solid transparent; /* 左边框 */
      border-right: 10upx solid transparent; /* 右边框 */
      border-top: 20upx solid #F33F02; /* 上边框 */
      bottom: -19upx;
      left: 20upx;
    }
  }

  .circle-list {
    width: 100%;
    box-sizing: border-box;
    padding: 30upx 0;
    border-bottom: 1upx solid #E8E8E8;
    display: flex;
    flex-wrap: wrap;

    .circle-item {
      margin-right: 16upx;
      background-color: #EBEBEB;
      border-radius: 25upx;
      box-sizing: border-box;
      padding: 8upx 20upx;
      margin-bottom: 15upx;
      position: relative;
      font-size: 34upx;

      .circle-item-icon {
        position: absolute;
        box-sizing: border-box;
        padding: 0 10upx;
        height: 30upx;
        top: -20upx;
        right: -20upx;
        line-height: 30upx;
        background-color: #FF015B;
        font-size: 24upx;
        color: #FFFFFF;
        border-radius: 25upx;

        image {
          width: 44upx;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }

  }
}

.Circle-title-value {
  color: #333333;
  font-weight: 600;
  background-color: #E0ECED;
}

.address {
  font-size: 36upx;
  color: #666666;
  display: flex;
  align-items: center;
  margin-top: 20upx;

  .icon {
    margin-right: 10upx;
    width: 26upx;
    height: 32upx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.circle-item-active {
  background-color: #FFE5E5 !important;
}

.image-template {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
